const os = require('os')
const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require("terser-webpack-plugin")

const threads = os.cpus.length; //cpu核数

// 省略大量重复
function getStyleLoader(pre) {
    return [
        MiniCssExtractPlugin.loader, //提取CSS成为单独的文件
        'css-loader', //将css资源编译成commonjs模块添加到js中
        {
            //能解决大多数样式兼容性问题 写在css-loader前面
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        [
                            'postcss-preset-env', //官方预设
                        ],
                    ],
                },
            },
        },
        pre,
    ].filter(Boolean);
}

module.exports = {
    //入口
    entry: './src/main.js',
    //输出
    output: {
        path: path.resolve(__dirname, '../dist'), //所有文件的输出目录
        filename: "js/main.js",
        // 自动清空上次打包的内容
        // webpack4需要使用插件
        clean: true,
    },
    //加载器
    module: {
        rules: [
            //加载器的配置
            {
                oneOf: [{
                        test: /\.css$/,
                        use: getStyleLoader(),
                    },
                    {
                        test: /\.less$/,
                        use: getStyleLoader('less-loader'),
                    },
                    {
                        test: /\.scss$/,
                        use: getStyleLoader('sass-loader'),
                    },
                    {
                        test: /\.(png|jpe?g|gif)$/,
                        type: 'asset', //webpack5把打包图片内置了 以前需要写url-loader好像
                        parser: {
                            dataUrlCondition: {
                                //把小于10k的图片转为base64编码
                                //优点：减少请求数量  缺点：体积会更大
                                maxSize: 10 * 1024,
                            }
                        },
                        generator: {
                            //文件名取10位hash值
                            filename: 'static/images/[hash:10][ext]'
                        }
                    },
                    {
                        test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                        type: 'asset/resource', //字体文件不需要转base64 相当于以前的file-loader
                        generator: {
                            filename: 'static/media/[hash:10][ext][query]',
                        }

                    },
                    // {
                    //     test: /.js$/,
                    //     // exclude: /node_modules/, //排除node_modules中的js文件
                    //     include: path.resolve(__dirname, "../src"), //只处理src内容
                    //     use: [{
                    //         loader: 'thread-loader',
                    //         options: {
                    //             works: threads, //开启多线程
                    //         }
                    //     }, {
                    //         loader: 'babel-loader',
                    //         options: {
                    //             cacheDirectory: true, //开启babel缓存
                    //             cacheCompression: false, //关闭缓存文件压缩
                    //             plugins: ["@babel/plugin-transfrom-runtime"], //减少代码体积
                    //         },
                    //     }]
                    // }
                ],
            },
        ],
    },
    //插件
    plugins: [new ESLintPlugin({
            context: path.resolve(__dirname, '../src'), //检查内容  只检查src目录下的文件
            exclude: "node_modules", // 默认值
            cache: true, //开启缓存
            cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"),
            threads, //开启多线程
        }),
        new HtmlWebpackPlugin({
            //以'public/index.html'文件为基础来解析
            template: path.resolve(__dirname, '../public/index.html')
        }),
        new MiniCssExtractPlugin({
            //提取CSS为单独文件
            filename: "static/css/main.css"
        }),
        //CSS文件压缩
        // new CssMinimizerPlugin(),
        // new TerserWebpackPlugin({
        //     parallel: threads, //开启多线程
        // }),
    ],
    optimization: {
        //压缩的操作
        minimizer: [
            new CssMinimizerPlugin(),
            new TerserWebpackPlugin({
                parallel: threads, //开启多线程
            }),
        ]
    },
    //生产模式不需要devServer
    // //开发服务器 会自动监测文件，自动更新 开发模式下，不会输出文件。
    // devServer: {
    //     host: 'localhost', //开发服务器域名
    //     port: '3000', //启动服务器端口号
    //     open: true, //自动打开服务器
    // },
    // 模式
    mode: 'production',
    devtool: 'source-map',
}